
<!DOCTYPE html>
<html  style="font-size: 75px">
<head>
<meta charset="utf-8">
<meta name="description" id="description" content="我已经活了26.8335年，9003天">
<title>来来来，看看你活了多久……（逝去的光阴-时光机）</title>
<link rel="shortcut icon" href="../icon/live.ico" type="image/x-icon">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script>
<style>
.nomargin{
    margin:0px;}
    
.clock{
    margin:auto;
    padding:auto;
    height:660px;
    text-align:center;} 
    
.diary{
    margin-left:30px;
    margin-right:30px;
    margin-bottom:50px;
    margin-top:50px;} 

.content{
    color:black;
    margin:0px;
    font-size:0.5rem;
    max-height:100%;
    overflow:hidden;
    text-align:center;}

.marginb{
    margin-bottom:25px;}
.marginz{
    margin:0;}    
    
.grey{
    color:grey;}
    
.bigfont{
    font-size:1rem;}    

.button{
    margin:0px 0px 0px 0px;
    border:1px solid grey;
    border-radius:35px;
    background-color:white;
    padding:15px 15px 15px 15px;
    height:80px;
    width:50%;}

.hint{
    font-size:0.5rem;
    max-height:100%;
    text-align:center;}

.url{
    text-decoration:none;}
    
.table{
    border:0;
    margin:auto;}  
    
.grid{
    border:0px solid grey;
    margin:auto;
    width:33%;}
</style>
</head>

<body class="nomargin" onload="lifecount()">
    <div id="reset" style="text-align:right;height:80px;margin-right:40px;margin-top:10px">
        <a v-bind:href="lifecount_wx_url" v-show="show_resetlink">
            <img src="../icon/u14.png" style="text-align:right;" width="37" height="37" />
        </a>
    </div>
    
<!--     <div style="width:100%; height:80px;"></div> -->
    <div class="clock">
        <canvas id="canid" class='canid'></canvas>
    </div>
    <div style="width:100%; height:55px;"></div> 
    
    <div id="app">      
        <p v-bind:class="{content:1,marginb:1}">
            <span v-bind:class="{grey:1}">你都已经</span>
            <span v-bind:class="{bigfont:1}">{{count}}</span>
            <span v-bind:class="{grey:1}">岁了！！</span>
        </p>
        
        <div style="width:100%; height:90px;">
            <p v-bind:class="{content:1,grey:1,marginz:1}">{{vm.theyear}}年&nbsp&nbsp{{vm.month}}月&nbsp&nbsp{{vm.week}}周</p>
            <p v-bind:class="{content:1,grey:1,marginz:1}">{{vm.day}}日&nbsp{{vm.hour}}时&nbsp{{vm.minute}}分</p>
        </div>
  <!--       <table v-bind:class="{table:1}">
            <tr>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.theyear}}年</td>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.month}}月</td>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.week}}周&nbsp&nbsp</td>
            </tr>
            <tr>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.day}}日</td>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.hour}}时</td>
                <td v-bind:class="{content:1,table:1,grid:1,grey:1}">{{vm.minute}}分&nbsp&nbsp</td>
            </tr>
        </table>  -->

        <div style="width:100%; height:110px;"></div>        
        <div style="text-align:center; width:100%; height:100px; margin-top:20px; margin-bottom:0px;">
            <button v-bind:class="{content:1,button:1}">
                <a v-bind:class="{content:1,url:1}" v-bind:href="die_url">剩下的日子</a>
            </button>
        </div>
        
        <div style="width:100%; height:100px;"></div>
        <div style="text-align:center; width:100%; height:150px;">
            <img src="../qrcode/qrcode-lifecounter.jpg" style="vertical-align:middle;" width="150" height="150" />
        </div>  
        <div style="width:100%; height:20px;"></div>
        <p v-bind:class="{content:1}">长按识别以上二维码<br>看看我活了多久</p>        
    </div>
    
    
<script>
var vm = new Vue({
    el: '#app',
    data: {
        show_resetlink:false,    
        longevity:100,
        birthdate:new Date(1991,8,11,13,0,0),
        count:0,theyear:0,month:0,week:0,
        day:0,hour:0,minute:0,
        lifecount_wx_url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx319adcfa592cec6b&redirect_uri=http%3A%2F%2Fainotebook.51open.net/static/html/lifecounter?reset=yes&response_type=code&scope=snsapi_base&state=123#wechat_redirect',
        die_url:'http://ainotebook.51open.net/static/html/die.html'
    },
    
    methods: {
        setCookie: function (name, value, days) {
            var d = new Date;
            d.setTime(d.getTime() + 24*60*60*1000*days);
            window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
        },

        getCookie: function (name) {
            var v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return v ? v[2] : null;
        },

        delCookie: function (name) {
            this.setCookie(name, '', -1);
        }          
    }              
})

var vn = new Vue({
    el: '#reset',
    data: {
        show_resetlink:false, 
        lifecount_wx_url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx319adcfa592cec6b&redirect_uri=http%3A%2F%2Fainotebook.51open.net/lifecounter?reset=yes&response_type=code&scope=snsapi_base&state=123#wechat_redirect'       
    },
    methods: {}
})
    
function lifecount(){
    //如果找到用户数据，则显示重置icon和链接（即非他人访问）
    if (vm.getCookie('year') && vm.getCookie('month')){
        vn.show_resetlink = true;
    }
    
    var now = new Date();
    var birthyear,birthmonth,birthday,longevity;
    birthyear = getQueryString('year');
    birthmonth = getQueryString('month');
    birthday = getQueryString('day');
    longevity = getQueryString('longevity');
    if (birthyear && birthmonth && birthday && longevity){
        vm.birthdate = new Date(birthyear,birthmonth-1,birthday,0,0,0);
        if (vm.die_url.search('year')==-1) {
            vm.die_url = vm.die_url + '?year=' + birthyear + '&month=' + birthmonth + '&day=' + birthday + '&longevity=' + longevity;
        }        
    }
    vm.count = ((now-vm.birthdate)/(365.245*24*3600000)).toFixed(8);
    vm.theyear = ((now-vm.birthdate)/(365.245*24*3600000)).toFixed(0);
    vm.month = ((now-vm.birthdate)/(30.5*24*3600000)).toFixed(0);
    vm.week = ((now-vm.birthdate)/(7*24*3600000)).toFixed(0);
    vm.day = ((now-vm.birthdate)/(24*3600000)).toFixed(0);
    vm.hour = ((now-vm.birthdate)/3600000).toFixed(0);
    vm.minute = ((now-vm.birthdate)/60000).toFixed(0);
    t = setTimeout(function(){lifecount()},500);
    var description = "我都已经" + vm.count.toString() + '岁了！！';
    var meta = document.getElementsByTagName('meta');
    meta["description"].setAttribute('content', description);
}

function getQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}

function is_weixin(){
  var ua = navigator.userAgent.toLowerCase();
  if(ua.match(/MicroMessenger/i)=="micromessenger") {
    //alert('weixin navigator');
    return true;    
  } 
  else {
    //alert('not !!!!weixin navigator');
    return false;
  }
}

//////////////////////////////clock/////////////////////////
////////////////////////////////////////////////////////////
var canid=document.getElementById('canid');
var ct=canid.getContext('2d');
canid.width=660;
canid.height=660;
// canid.style.border='1px solid #bbb';

ct.beginPath();
setInterval(function(){
    var r = 330;
    var r2 = 300;
	ct.clearRect(0,0,canid.width,canid.height);
	ct.beginPath();
    ct.arc(r,r,r2,0*(Math.PI/180),360*(Math.PI/180));
    // 只有弧度
    ct.strokeStyle='#aaa';
    ct.stroke();

    // ct.fillText(json[0].title,0,0);
    ct.beginPath();
    var tangleR=0;
    
    for(var i=0;i<360;i++){
        var x;var y;
        ct.beginPath();
        ct.moveTo(r,r);
        x = r + Math.cos(tangleR* Math.PI / 180 ) * (r2); 
        y = r + Math.sin(tangleR* Math.PI / 180 ) * (r2); 
        tangleR++;
        ct.strokeStyle='#ccc';

        // console.log(x,y);
        ct.lineTo(x,y);
        ct.stroke();
    }

    ct.beginPath();
    ct.arc(r,r,r2-10,0*(Math.PI/180),360*(Math.PI/180));
    ct.fillStyle='white';
    ct.fill();
    ct.beginPath();
    var tangle=0;
    
    for(var i=0;i<60;i++){
        var x;var y;
        ct.beginPath();
        ct.moveTo(r,r);
        x = r + Math.cos(tangle* Math.PI / 180 ) * (r2); 
        y = r + Math.sin(tangle* Math.PI / 180 ) * (r2); 
        /*弧度上的x,y坐标*/
        tangle+=6;
        ct.strokeStyle='#aaa';
        // console.log(x,y);
        ct.lineTo(x,y);
        ct.stroke();
    }
    
    ct.beginPath();
    ct.arc(r,r,r2-20,0*(Math.PI/180),360*(Math.PI/180));
    ct.fillStyle='white';
    ct.fill();
    var tangleRR=-60;
    
    for(var i=0;i<12;i++){
        ct.beginPath();
        var x;var y;
        // ct.moveTo(250,250);

        x = r + Math.cos(tangleRR* Math.PI / 180 ) * (r2-50); 
        y = r + Math.sin(tangleRR* Math.PI / 180 ) * (r2-50); 
        tangleRR += 30;
        console.log(x,y,""+(i+1));
        // ct.lineTo(x,y);
        // ct.stroke();
        ct.fillStyle='#aaa'
        
        ct.fillText(""+(i+1),x,y);
        ct.fill();
        ct.textAlign='center';       
    }

    ct.beginPath();
    ct.arc(r,r,5,0*(Math.PI/180),360*(Math.PI/180));
    ct.stroke();

    ct.fill();

    var time=new Date();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time.getSeconds();
    var mj=m*6+(s/60)*6-90;
    var sj=s*6-90;
    var hj=h*30+(m/60)*30+(s/3600)*30-90;
    x0=r+Math.cos(hj* Math.PI / 180 ) * (r2-120); 
    x1=r+Math.cos(mj* Math.PI / 180 ) * (r2-100); 
    x2=r+Math.cos(sj* Math.PI / 180 ) * (r2-60); 
    y0=r+Math.sin(hj* Math.PI / 180 ) * (r2-120); 
    y1=r+Math.sin(mj* Math.PI / 180 ) * (r2-100); 
    y2=r+Math.sin(sj* Math.PI / 180 ) * (r2-60); 

    ct.beginPath();
    ct.moveTo(r,r);
    ct.lineTo(x0,y0);
    ct.stroke();
    ct.beginPath();
    ct.moveTo(r,r);
    ct.lineTo(x1,y1);
    ct.stroke();

    ct.beginPath();
    ct.moveTo(r,r);
    ct.lineTo(x2,y2);
    ct.stroke();	
},1000);
</script>
</body>
</html>
